<template>
  <div>
    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
               @click="addEnum">{{title}}
    </el-button>
    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
               @click="addCustomEnum" v-if="!isEditor">自定义枚举
    </el-button>
    <div v-for="(dynamic, idx) in dynamicData" :key="idx" class="mar-top-5">
      <el-row>
        <el-col :span="20" v-if="!dynamic.isCustom">
          <el-col :span="!thirdKey ? 12 : 8" class="pad-rgt-10">
            <el-select
              v-if="isKeySelector"
              v-model="dynamic[dynamicKey]"
              clearable filterable
              class="width-100" size="medium"
              :placeholder="`请选择${dynamicKey}`">
              <el-option :label="sel.label" :value="sel.value" :key="idx"
                         v-for="(sel, idx) in dynamicSelData"></el-option>
            </el-select>

            <CommandStreamTag
              v-else-if="isKeyStream"
              :stream-str-info="dynamic[dynamicKey].keyStreamInfo"
              :stream-tags="dynamic[dynamicKey].keyTagData"
              @clickCommandTag="clickCommandTag"
            ></CommandStreamTag>
            <el-input
              v-else v-model="dynamic[dynamicKey]"
              class="mar-rgt-5" size="medium"
              :placeholder="dynamicKey"
            ></el-input>
          </el-col>
          <el-col :span="!thirdKey ? 12 : 8" class="pad-rgt-10">
            <el-select
              v-if="isValueSelector"
              v-model="dynamic[dynamicValue]"
              clearable filterable
              class="width-100" size="medium"
              :placeholder="`请选择${dynamicValue}`">
              <el-option :label="sel.label" :value="sel.value" :key="idx"
                         v-for="(sel, idx) in dynamicSelData"></el-option>
            </el-select>
            <CommandStreamTag
              v-else-if="isValueStream"
              :stream-str-info="dynamic[dynamicValue].valueStreamInfo"
              :stream-tags="dynamic[dynamicValue].valueTagData"
              @clickCommandTag="clickCommandTag"
            ></CommandStreamTag>
            <el-input
              v-else v-model="dynamic[dynamicValue]"
              class="mar-rgt-5" size="medium"
              :placeholder="dynamicValue"
            ></el-input>
          </el-col>
          <el-col :span="8" v-if="thirdKey">
            <el-input-number class="width-100" v-model="dynamic[thirdKey]" :min="0"></el-input-number>
          </el-col>
        </el-col>
        <el-col :span="20" v-if="dynamic.isCustom" >
          <el-col :span="6"  class="pad-rgt-10">
            <el-input class="width-100" v-model="dynamic.key" placeholder="请输入key"></el-input>
          </el-col>
          <el-col :span="6"  class="pad-rgt-10">
            <el-input class="width-100" v-model="dynamic.value" placeholder="请输入value"></el-input>
          </el-col>
          <el-col :span="6"  class="pad-rgt-10">
            <el-input class="width-100" v-model="dynamic.alias" placeholder="请输入枚举别名"></el-input>
          </el-col>
          <el-col :span="6" >
            <el-input-number class="width-100" v-model="dynamic.minCtrInterval" :min="0"></el-input-number>
          </el-col>
        </el-col>
        <el-col :span="4" class="pad-lft-10">
          <el-button type="success" size="medium" icon="el-icon-document-copy"
                     circle @click="copyEnum(idx)"></el-button>
          <el-button type="danger" size="medium" icon="el-icon-delete"
                     circle @click="deleteEnum(idx)"></el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import CommandStreamTag from './CommandStreamTag.vue';
  import {deepCopyWithJson} from "@/utils";

  export default {
    name: "EnumDynamic",
    components: {
      CommandStreamTag
    },
    props: {
      isEditor: {
        type: Boolean,
        default: false
      },
      title: {
        default: () => {
          return '枚举'
        }
      },
      dataType: {
        default: () => {
          return 'string'
        }
      },
      dynamicKey: {
        default: () => {
          return 'key'
        }
      },
      dynamicValue: {
        default: () => {
          return 'value'
        }
      },
      isKeySelector: {
        default: () => {
          return false
        }
      },
      isValueSelector: {
        default: () => {
          return false
        }
      },
      isKeyStream: {
        default: () => {
          return false
        }
      },
      isValueStream: {
        default: () => {
          return false
        }
      },
      thirdKey: {
        default: () => {
          return ''
        }
      },
      dynamicSelData: {
        default: () => {
          return []
        }
      },
      dynamicData: {
        default: () => {
          return []
        }
      },
    },
    methods: {
      addEnum() {
        let key = this.isKeyStream ? {
          keyStreamInfo: {
            identify: this.title,
            value: '',
            size: 'medium',
            placeholder: ''
          },
          keyTagData: [],
        } : '';
        let value = this.isValueStream ? {
          valueStreamInfo: {
            identify: this.title,
            value: '',
            size: 'medium',
            placeholder: ''
          },
          valueTagData: [],
        } : '';
        const enumInfo = {
          [this.dynamicKey]: key,
          [this.dynamicValue]: value
        };
        this.thirdKey && (enumInfo[this.thirdKey] = 0);
        this.dynamicData.push(enumInfo);
      },
      addCustomEnum() {
        //自定义枚举
        this.dynamicData.push({
          isCustom:true,
          key:'',
          alias:'',
          value:'',
          minCtrInterval:0
        });
      },
      copyEnum(idx) {
        const src = deepCopyWithJson(this.dynamicData[idx]);
        this.dynamicData.splice(idx, 0, src);
      },
      deleteEnum(idx) {
        this.dynamicData.splice(idx, 1);
      },
      clickCommandTag(type = '', tag = {}) {
        this.$emit('clickCommandTag', type, tag);
      },
    }
  }
</script>

<style scoped>

</style>
